import React from 'react';

const testimonials = [
  {
    name: "李老师",
    role: "在线教育讲师",
    avatar: "https://avatars.dicebear.com/api/avataaars/teacher-li.svg",
    quote: "使用创想家后，我的课程制作效率提升了50%，分镜脚本功能让我的视频更加专业。"
  },
  {
    name: "王先生",
    role: "短视频博主",
    avatar: "https://avatars.dicebear.com/api/avataaars/mr-wang.svg",
    quote: "AI创作功能太棒了！帮我快速生成文案和脚本，让我的创作灵感源源不断。"
  },
  {
    name: "张女士",
    role: "企业培训师",
    avatar: "https://avatars.dicebear.com/api/avataaars/ms-zhang.svg",
    quote: "项目管理功能让我的培训视频制作井井有条，团队协作效率大幅提升。"
  }
];

export default function SocialProof() {
  return (
    <section className="mx-auto container">
      <div className=" ">
        <div className="text-center mb-16">
          <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
            客户案例
          </h2>
          <p className="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
            看看我们的用户如何通过创想家提升视频创作效率
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
              <div className="p-6">
                <div className="flex items-center mb-4">
                  <div className="flex-shrink-0">
                    <img
                      className="h-12 w-12 rounded-full"
                      src={testimonial.avatar}
                      alt="用户头像"
                    />
                  </div>
                  <div className="ml-4">
                    <h4 className="text-lg font-bold text-gray-900">{testimonial.name}</h4>
                    <p className="text-sm text-gray-500">{testimonial.role}</p>
                  </div>
                </div>
                <p className="text-gray-600">"{testimonial.quote}"</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
